﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="associate.aspx.cs" Inherits="manage.setting.Warehouse.associate" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" href="/assets/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/assets/css/jquery-ui-1.10.3.full.min.css" />
    <link rel="stylesheet" href="/assets/css/ui.jqgrid.css" />
    <script type="text/javascript" src="/js/jquery.js"></script>
    <!-- fonts -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
    <link rel="stylesheet" href="/assets/css/ace.min.css" />
    <link rel="stylesheet" href="/assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="/assets/css/ace-skins.min.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
       
        <div id="grid-pager">
        </div>
         <table id="grid-table">
        </table>
        <script type="text/javascript">
            var $path_base = "/"; //this will be used in gritter alerts containing images
        </script>
    </div>
    </form>
    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/assets/js/typeahead-bs2.min.js"></script>
    <script src="/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
    <script src="/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
    <!-- ace scripts -->
    <!-- inline scripts related to this page -->
    <script type="text/javascript">
        var grid_data =
			[
				{ id: "1", name: "第一小队", note: "三号仓库;五号仓库", stock: "无", sdate: "2013-12-03" },
				{ id: "2", name: "第二小队", note: "四号仓库", stock: "无", sdate: "2013-12-03" },
				{ id: "3", name: "第三小队", note: "片区大库", stock: "无", sdate: "2013-12-03" },
				{ id: "4", name: "第四小队", note: "五号仓库", stock: "无", sdate: "2013-12-03" },
                { id: "5", name: "第二大队", note: "七号仓库", stock: "无", sdate: "2013-12-03" },
                { id: "6", name: "井下第三小队", note: "片区大库", stock: "无", sdate: "2013-12-03" },
                { id: "7", name: "第五小队", note: "五号仓库", stock: "无", sdate: "2013-12-03" },
                { id: "8", name: "第六小队", note: "五号仓库", stock: "无", sdate: "2013-12-03" },
                { id: "9", name: "第七小队", note: "五号仓库", stock: "无", sdate: "2013-12-03" },
                { id: "10", name: "第八小队", note: "五号仓库", stock: "无", sdate: "2013-12-03" },
			];

        jQuery(function ($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";
            jQuery(grid_selector).jqGrid({
                //direction: "rtl",
                data: grid_data,
                datatype: "local",
                height: 300,
                toppager: true,
                colNames: [' ', '序号', '部门名称', '关联仓库', '描述', '创建时间'],
                colModel: [
						{ name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
						    formatter: 'actions',
						    formatoptions: {
						        keys: true
						        //delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
						    }
						},
						{ name: 'id', index: 'id', width: 60, sorttype: "int", editable: true },
						{ name: 'name', index: 'name', width: 150, editable: true },
						{ name: 'stock', index: 'stock', width: 70, editable: true },
						{ name: 'ship', index: 'ship', width: 90, editable: true },
                        { name: 'sdate', index: 'sdate', width: 90, editable: true, sorttype: "date" }
					],

                viewrecords: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: pager_selector,
                altRows: true,
                //toppager: true,

                multiselect: true,
                multiboxonly: true,

                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);

                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },

                editurl: $path_base + "/dummy.html", //nothing is saved
                caption: "就近领料关系列表",
                autowidth: true

            });

            //navButtons
            jQuery(grid_selector).jqGrid('navGrid', pager_selector,
					{ 	//navbar options
					    edit: false,
					    add: true,
					    addfunc: function () { alert(1) },
					    addicon: 'icon-plus-sign purple',
					    addtitle: "添加",
					    del: true,
					    delicon: 'icon-trash red',
					    search: true,
					    searchicon: 'icon-search orange'
					}
				)







            function style_search_filters(form) {
                form.find('.delete-rule').val('X');
                form.find('.add-rule').addClass('btn btn-xs btn-primary');
                form.find('.add-group').addClass('btn btn-xs btn-success');
                form.find('.delete-group').addClass('btn btn-xs btn-danger');
            }
            function style_search_form(form) {
                var dialog = form.closest('.ui-jqdialog');
                var buttons = dialog.find('.EditTable')
                buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
                buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
                buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
            }

            function beforeDeleteCallback(e) {
                var form = $(e[0]);
                if (form.data('styled')) return false;

                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_delete_form(form);

                form.data('styled', true);
            }





            //it causes some flicker when reloading or navigating grid
            //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
            //or go back to default browser checkbox styles for the grid
            function styleCheckbox(table) {
                /**
                $(table).find('input:checkbox').addClass('ace')
                .wrap('<label />')
                .after('<span class="lbl align-top" />')
			
			
                $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                .find('input.cbox[type=checkbox]').addClass('ace')
                .wrap('<label />').after('<span class="lbl align-top" />');
                */
            }


            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons(table) {
                /**
                var replacement = 
                {
                'ui-icon-pencil' : 'icon-pencil blue',
                'ui-icon-trash' : 'icon-trash red',
                'ui-icon-disk' : 'icon-ok green',
                'ui-icon-cancel' : 'icon-remove red'
                };
                $(table).find('.ui-pg-div span.ui-icon').each(function(){
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                })
                */
            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                var replacement =
					{
					    'ui-icon-seek-first': 'icon-double-angle-left bigger-140',
					    'ui-icon-seek-prev': 'icon-angle-left bigger-140',
					    'ui-icon-seek-next': 'icon-angle-right bigger-140',
					    'ui-icon-seek-end': 'icon-double-angle-right bigger-140'
					};
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                    if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
                })
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({ container: 'body' });
                $(table).find('.ui-pg-div').tooltip({ container: 'body' });
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');


        });
    </script>
</body>
</html>